<template>
    <div class="layout-content">
        <div class="layout-content-main">
            <Breadcrumb class="content-title mbt1">
                <BreadcrumbItem>系统参数</BreadcrumbItem>
            </Breadcrumb>
            <div class="section">
                <div class="section-title">
                    系统参数
                </div>
                <Row class="mbt4">
                    <Col span="4">
                    <Select>
                        <Option value="11111">11111</Option>
                        <Option value="22222">22222</Option>
                        <Option value="33333">33333</Option>
                    </Select>
                    </Col>

                    <Col span="20" class="text-right">
                    <Button type="primary" size="large" @click="addArgumengModal=true">创建参数</Button>
                    </Col>
                </Row>
                <Table border :columns="columns7" :data="data6" class="mbt4"></Table>
                <Page :total="100" show-elevator class="center" @on-change="changePage"></Page>
                <!-- 创建参数start -->
                <Modal v-model="addArgumengModal" title="系统参数" class="mediumSize-Modal">
                    <Form label-position="right" :label-width="100">
                        <Row>
                            
                            <Col span="24">
                            <FormItem label="参数名称:">
                                <Input></Input>
                            </FormItem>
                            </Col>
                            <Col span="24">
                            <FormItem label="参数数值:">
                                 <Input></Input>
                            </FormItem>
                            </Col>
                            <Col span="24">
                            <FormItem label="参数状态:">
                                 <Input></Input>
                            </FormItem>
                            </Col>
                        </Row>

                    </Form>
                </Modal>
                <!-- 创建参数end-->

                <!-- 查看参数弹出框start -->

                <Modal v-model="seeArgumengModal" title="查看参数" class="mediumSize-Modal">
                     <Form label-position="right" :label-width="100">
                        <Row>
                            
                            <Col span="24">
                            <FormItem label="参数名称:">
                                <Input></Input>
                            </FormItem>
                            </Col>
                            <Col span="24">
                            <FormItem label="参数数值:">
                                 <Input></Input>
                            </FormItem>
                            </Col>
                            <Col span="24">
                            <FormItem label="参数状态:">
                                 <Input></Input>
                            </FormItem>
                            </Col>
                        </Row>

                    </Form>

                </Modal>
                <!-- 查看参数弹出框end -->

                <!-- 编辑参数弹出框start -->
                <Modal v-model="editArgumengModal" title="编辑参数" class="mediumSize-Modal">
                     <Form label-position="right" :label-width="100">
                        <Row>
                            
                            <Col span="24">
                            <FormItem label="参数名称:">
                                <Input></Input>
                            </FormItem>
                            </Col>
                            <Col span="24">
                            <FormItem label="参数数值:">
                                 <Input></Input>
                            </FormItem>
                            </Col>
                            <Col span="24">
                            <FormItem label="参数状态:">
                                 <Input></Input>
                            </FormItem>
                            </Col>
                        </Row>

                    </Form>

                </Modal>

                <!-- 编辑参数弹出框end -->
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            addArgumengModal: false,
            seeArgumengModal: false,
            editArgumengModal: false,
            columns7: [
                {
                    title: "添加时间",
                    key: 'addTime',
                    align: "center",
                    width: "150",

                },
                {
                    title: '邮件标题',
                    key: 'emialTitle',
                    align: "center",
                },

                {
                    title: '邮件内容',
                    key: 'emialContent',
                    align: "center",
                    
                },
                {
                    title: '操作',
                    key: 'action',
                    width: 400,
                    align: 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {

                                    size: 'small'
                                },
                                style: {
                                    marginRight: '10px'
                                },
                                on: {
                                    click: () => {
                                        // this.show(params.index)
                                        this.seeArgumengModal = true;
                                    }
                                }
                            }, '查看'),
                            h('Button', {
                                props: {

                                    size: 'small'
                                },
                                style: {
                                    marginRight: '10px'
                                },
                                on: {
                                    click: () => {
                                        // this.show(params.index)
                                        this.editArgumengModal = true;
                                    }
                                }
                            }, '编辑'),
                            h('Button', {
                                props: {

                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        // this.show(params.index)
                                        //this.chooseJurisdictionModal = true;
                                        this.remove(params.index)

                                    }
                                }
                            }, '删除'),
                        ]);
                    }
                }
            ],
            data6: [
                {
                    addTime: '2017-10-03',
                    emialTitle: "中共中央19大",
                    emialContent: "热力祝贺19大顺利召开",


                },
                {
                    addTime: '2017-10-03',
                    emialTitle: "中共中央19大",
                    emialContent: "热力祝贺19大顺利召开",
                },
                {
                    addTime: '2017-10-03',
                    emialTitle: "中共中央19大",
                    emialContent: "热力祝贺19大顺利召开",
                },

            ]
        }
    },
    methods: {

        remove(index) {
            // this.data6.splice(index, 1);
            this.$Modal.confirm({
                title: '确定要删除吗？',
                content: '<p>删除后将无法恢复 !</p>',
                onOk: () => {
                    this.data6.splice(index, 1);
                },
                onCancel: () => {
                    this.$Message.info('点击了取消');
                }
            });
        },
        changePage(data) {
            console.log(data)
        },
        checkChoose() {

        }
    }
}
</script>

<style>
.emial-content {
    line-height: 30px;
    height: 323px;
    overflow: auto;
}
</style>
